<template>
  <div>
    <div class="home" v-if="list">
      <shop-head :title="list.name" :img="list.image_path" />
      <div class="choice">
        <a :class="one" @click="change(true)">商品</a>
        <a :class="two" @click="change(false)">评价</a>
      </div>
      <div v-if="data">
        <shop-menu v-if="hr" :cls="cls" />
        <evaluate v-if="!hr" />
      </div>
    </div>
    <div v-else class="load">
      <load show="true" />
    </div>
  </div>
</template>

<script>
import shopHead from './shopComp/shopHead'
import shopMenu from './shopComp/shopMenu'
import evaluate from './Evaluate/evaluate'
import load from '../common/Load'
import { Toast } from 'mint-ui'
export default {
  components: {
    shopHead,
    shopMenu,
    evaluate,
    load
  },
  data() {
    return {
      one: 'flag',
      two: null,
      cls: [],
      clsList: [],
      hr: true,
      list: null,
      data: true,
      toastInstanse: null
    }
  },
  methods: {
    getShop() {
      this.$http
        .get(
          'https://elm.cangdu.org/shopping/restaurant/' + this.$route.query.id
        )
        .then(data => {
          this.list = data.body
        })
        .catch(() => {
          this.list = true
          Toast({
            message: '加载失败,请检查网络连接',
            duration: 1000
          })
        })
      //window.console.log(this.list)
    },
    change(data) {
      //window.console.log(data)
      if (data) {
        this.one = 'flag'
        this.two = null
        this.hr = true
      } else {
        this.one = null
        this.two = 'flag'
        this.hr = false
      }
    },
    getCommodity() {
      this.$http
        .get(
          'https://elm.cangdu.org/shopping/v2/menu?restaurant_id=' +
            this.$route.query.id
        )
        .then(data => {
          //window.console.log(data.body)
          this.cls = data.body
          if (this.cls.length == 0) {
            this.data = false
          }
        })
    }
  },
  created() {
    this.getCommodity()
    this.getShop()
  }
}
</script>
<style  scoped>
.choice {
  display: flex;
  height: 2rem;
}
a {
  display: block;
  width: 50%;
  text-align: center;
  color: #666666;
  border-bottom: #f5f5f5 1px solid;
  text-decoration: none !important;
  background-color: #f5f5f5;
}
.flag {
  background-color: #ffffff;
  color: #26a2ff !important;
}
a:not([href]):hover {
  color: none;
}
.home {
  width: 100%;
  height: 100%;
}
body {
  height: 100%;
}
.load {
  width: 100%;
  position: fixed;
  top: 50%;
  margin: 0 auto;
}
</style>